<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  
.bg{
    color:#333;
}
.content{
    width:100%;
    margin:0px;
    padding:0px;
}
.content img{
    width:100vw;
    margin-bottom:40%;
}
.fixedMenu{
    width:100%;
    // height:9rem;
    background:#fff;
    position:fixed;
    bottom:0px;
    text-align: center;
    padding: 0.1em 0.8em;
}
.fixedMenu div{
    margin:0.8rem;
    font-size:14px;
    line-height: 1.5rem;;
    color:#333;
    text-align: left;
}
.fixedMenu input{
    background:#00b7ee;
    border:0px;
    color:#fff;
    width:80%;
    height:3rem;
    border-radius:.3rem;
    font-size:20px;
    text-align: center;
}
.textTitle{
    min-height:0px;
    text-align: center;
    font-size:20px;   
    line-height:5rem;
}
.textCenter{
    min-height:0px;
    font-size:18px;
    padding:0 1rem;
    line-height:2rem;
}
 
</style>



<template>
  <div class="bg">
      <div class="content">
          <div class="textTitle">{{this.block.textTitle}}</div>
          <div class="textCenter">{{this.block.textCenter}}</div>
          <img :src='this.block.textUrl'/>
      </div>
      <div class="fixedMenu">
          <div>点击<b>“立即预约”</b>我们将为您匹配专属的客户经理，上门为您办理套餐入网开户，支持企业批量开户。</div>
          <x-button type="primary" :gradients="['#1D62F0', '#19D5FD']" @click.native="toOrder">立即预约</x-button>
      </div>
  </div>
 
</template>

<script>
  import { XButton} from 'vux'
  export default {
    data() {
      return {
        block:{}
      }
    },
    mounted(){
      console.log(this.$route.params)
      let id=this.$route.params.id;
      this.block=this.$blocks.find(x=>x.id==id)
    },
    methods: {
      toOrder(){
        this.$router.push({name:'Order',params:{id:this.block.id}})
      }
    },
    components: {
      XButton,
    }
  }
</script>

